/**
 * SCSS变量定义
 * @author cencat
 * @description 固定商家场景多租户SaaS企业综合管理系统全局样式变量
 * @createTime 2024-01-01
 */

// ==================== 颜色系统 ====================

// 主色调 - 科幻蓝紫渐变
$primary-color: #667eea;
$primary-light: #764ba2;
$primary-dark: #4c63d2;
$primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

// 辅助色调
$secondary-color: #f093fb;
$secondary-light: #f5576c;
$secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

// 功能色调
$success-color: #00d4aa;
$success-light: #5deca0;
$success-dark: #00a085;
$success-gradient: linear-gradient(135deg, #00d4aa 0%, #5deca0 100%);

$warning-color: #ffb74d;
$warning-light: #ffc947;
$warning-dark: #ff9800;
$warning-gradient: linear-gradient(135deg, #ffb74d 0%, #ffc947 100%);

$error-color: #ff5722;
$error-light: #ff7043;
$error-dark: #d32f2f;
$error-gradient: linear-gradient(135deg, #ff5722 0%, #ff7043 100%);

$info-color: #29b6f6;
$info-light: #4fc3f7;
$info-dark: #0288d1;
$info-gradient: linear-gradient(135deg, #29b6f6 0%, #4fc3f7 100%);

// 中性色调
$white: #ffffff;
$black: #000000;
$gray-50: #fafafa;
$gray-100: #f5f5f5;
$gray-200: #eeeeee;
$gray-300: #e0e0e0;
$gray-400: #bdbdbd;
$gray-500: #9e9e9e;
$gray-600: #757575;
$gray-700: #616161;
$gray-800: #424242;
$gray-900: #212121;

// 文本颜色
$text-primary: #212121;
$text-secondary: #757575;
$text-disabled: #bdbdbd;
$text-inverse: #ffffff;

// 背景色
$bg-primary: #ffffff;
$bg-secondary: #fafafa;
$bg-tertiary: #f5f5f5;
$bg-dark: #121212;
$bg-dark-secondary: #1e1e1e;
$bg-dark-tertiary: #2d2d2d;

// 边框色
$border-light: #e0e0e0;
$border-medium: #bdbdbd;
$border-dark: #757575;

// 阴影色
$shadow-light: rgba(0, 0, 0, 0.1);
$shadow-medium: rgba(0, 0, 0, 0.15);
$shadow-dark: rgba(0, 0, 0, 0.25);

// ==================== 字体系统 ====================

// 字体族
$font-family-primary: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
$font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

// 字体大小
$font-size-xs: 12px;
$font-size-sm: 14px;
$font-size-base: 16px;
$font-size-lg: 18px;
$font-size-xl: 20px;
$font-size-2xl: 24px;
$font-size-3xl: 30px;
$font-size-4xl: 36px;
$font-size-5xl: 48px;

// 字体粗细
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

// 行高
$line-height-tight: 1.25;
$line-height-normal: 1.5;
$line-height-relaxed: 1.75;

// ==================== 间距系统 ====================

// 基础间距单位
$spacing-unit: 4px;

// 间距变量
$spacing-xs: $spacing-unit; // 4px
$spacing-sm: $spacing-unit * 2; // 8px
$spacing-md: $spacing-unit * 3; // 12px
$spacing-lg: $spacing-unit * 4; // 16px
$spacing-xl: $spacing-unit * 6; // 24px
$spacing-2xl: $spacing-unit * 8; // 32px
$spacing-3xl: $spacing-unit * 12; // 48px
$spacing-4xl: $spacing-unit * 16; // 64px
$spacing-5xl: $spacing-unit * 20; // 80px

// ==================== 圆角系统 ====================

$border-radius-xs: 2px;
$border-radius-sm: 4px;
$border-radius-md: 6px;
$border-radius-lg: 8px;
$border-radius-xl: 12px;
$border-radius-2xl: 16px;
$border-radius-3xl: 24px;
$border-radius-full: 50%;

// ==================== 阴影系统 ====================

$box-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$box-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
$box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
$box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
$box-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
$box-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

// 科幻风格阴影
$box-shadow-neon: 0 0 20px rgba(102, 126, 234, 0.5);
$box-shadow-glow: 0 0 30px rgba(118, 75, 162, 0.3);

// ==================== 动画系统 ====================

// 动画时长
$duration-fast: 0.15s;
$duration-normal: 0.3s;
$duration-slow: 0.5s;

// 动画缓动函数
$ease-in: cubic-bezier(0.4, 0, 1, 1);
$ease-out: cubic-bezier(0, 0, 0.2, 1);
$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
$ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

// ==================== 断点系统 ====================

$breakpoint-xs: 480px;
$breakpoint-sm: 768px;
$breakpoint-md: 1024px;
$breakpoint-lg: 1280px;
$breakpoint-xl: 1536px;

// ==================== Z-index系统 ====================

$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;
$z-index-toast: 1080;
$z-index-loading: 9999;

// ==================== 组件特定变量 ====================

// 头部导航
$header-height: 64px;
$header-bg: $white;
$header-shadow: $box-shadow-sm;

// 侧边栏
$sidebar-width: 240px;
$sidebar-collapsed-width: 64px;
$sidebar-bg: $white;
$sidebar-shadow: $box-shadow-md;

// 内容区域
$content-padding: $spacing-xl;
$content-bg: $bg-secondary;

// 卡片
$card-bg: $white;
$card-border: 1px solid $border-light;
$card-radius: $border-radius-lg;
$card-shadow: $box-shadow-sm;
$card-padding: $spacing-xl;

// 表格
$table-header-bg: $bg-tertiary;
$table-border: $border-light;
$table-hover-bg: rgba(102, 126, 234, 0.04);

// 表单
$form-item-margin: $spacing-lg;
$input-height: 40px;
$input-border: $border-light;
$input-focus-border: $primary-color;
$input-radius: $border-radius-md;

// 按钮
$button-height: 40px;
$button-padding: 0 $spacing-lg;
$button-radius: $border-radius-md;
$button-shadow: $box-shadow-sm;

// ==================== 科幻主题特定变量 ====================

// 霓虹效果
$neon-primary: 0 0 10px $primary-color, 0 0 20px $primary-color, 0 0 30px $primary-color;
$neon-secondary: 0 0 10px $secondary-color, 0 0 20px $secondary-color, 0 0 30px $secondary-color;
$neon-success: 0 0 10px $success-color, 0 0 20px $success-color, 0 0 30px $success-color;

// 渐变背景
$gradient-primary: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);
$gradient-secondary: linear-gradient(135deg, $secondary-color 0%, $secondary-light 100%);
$gradient-dark: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);

// 玻璃态效果
$glass-bg: rgba(255, 255, 255, 0.1);
$glass-border: rgba(255, 255, 255, 0.2);
$glass-backdrop: blur(10px);

// ==================== 暗色主题变量 ====================

// 暗色背景
$dark-bg-primary: #121212;
$dark-bg-secondary: #1e1e1e;
$dark-bg-tertiary: #2d2d2d;

// 暗色文本
$dark-text-primary: #ffffff;
$dark-text-secondary: #b3b3b3;
$dark-text-disabled: #666666;

// 暗色边框
$dark-border-light: #333333;
$dark-border-medium: #555555;
$dark-border-dark: #777777;